<template>
    <div class="rx-seal-dialog">
        <div class="rx-seal-container">
            <div class="rx-seal-list"  v-for="img of signatures" :key="img.fileId" @click="imgClick(img)">
                <label :for="`img-${img.fileId}`" class="rx-seal-img-box"
                       :class="{'rx-seal-img-active':isChecked(img)}">
                    <img class="list-img" :src="getImagePath(img.fileId)" :alt="img.name">
                </label>
                <div class="rx-seal-title" >
                    <span class="rx-seal-name" :title="img.name">{{ img.name }}</span>
                </div>
            </div>
        </div>
        <div class="rs-seal-dialog-btn">
            <a-button type="primary" @click="ok">{{$ti18('rxForm.okBtn','确定')}}</a-button>
            <a-button @click="cancel">{{$ti18('rxForm.cancelBtn','取消')}}</a-button>
        </div>
    </div>
</template>

<script>
import {Util} from "@lowcode/jpaas-common-lib"
import SysSignatureApi from '@/api/system/core/sysSignature'

export default {
    name: "SelectSignDialog",
    props:{
        //弹窗ID
        layerid:{
            type:String
        },
        //弹窗数据
        lydata:{
            type:Object
        },
        //回调函数
        destroy:Function,
    },
    data(){
        return {
            selected:{},
            signatures:[],
        }
    },
    created(){
        this.getSignList();
    },
    methods:{
        getSignList(){
            SysSignatureApi.getAll().then(res=>{
                let aryTmp=[];
                let rows=res.data;
                for(let i=0;i<rows.length;i++){
                    let row=rows[i];
                    let obj={name:row.fileName,fileId:row.fileId};
                    aryTmp.push(obj);
                }
                this.signatures=aryTmp;
            })
        },
        imgClick(item){
            this.selected=item;
        },
        isChecked(img){
            return this.selected ? this.selected.fileId==img.fileId : false;
        },
        ok(){
            let data = this.selected ;
            if(!data.fileId){
                this.$message.warn(this.$ti18('msa.selSignTips','请选择签名!','PdfSealSignature'));
                return ;
            }
            Util.closeWindow(this,'ok',data)
        },
        cancel(){
            Util.closeWindow(this,"cancel")
        },
        getImagePath(fileId) {
            let accessToken = TokenUtil.getToken();
            let time=new Date().getTime();
            fileId=Util.encryptWord(fileId);
            var isScale=Util.encryptWord(false);
            let url = `/api/api-system/system/core/sysFile/previewImg?fileId=${fileId}&accessToken=${accessToken}&time=${time}&isScale=${isScale}` ;
            return url;
        }
    }
}
</script>

<style scoped>
.rx-seal-dialog{
    width: 100%;
    position: relative;
}
.rx-seal-container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    bottom: 54px;
    top: 0;
    position: absolute;
    overflow: auto;
}
.rx-seal-list{
    padding: 10px 0 10px 10px;
    display: block;
    text-align: center;
}
.rs-seal-dialog-btn{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 10px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.rs-seal-dialog-btn button:first-child{
    margin-right: 8px;
}
.rx-seal-img-box{
    display: block;
    width: 160px;
    height: 160px;
    line-height: 160px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0;
}

.rx-seal-img-box.rx-seal-img-active{
    border-color: #40a9ff;
}
.list-img{
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}
.rx-seal-title .rx-seal-name{
    padding-left: 6px;
}
.rx-seal-title{
    padding:0 6px ;
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
